<template>
    <div class="main-wrap">
        <div class="con">
            <router-view></router-view>
        </div>
        <footer>
            <router-link to="/main/home" tag="dl">
                <dt>
                    <span class="iconfont icon-xuanzejiantou"></span>
                </dt>
                <dd>首页</dd>
            </router-link>
            <router-link to="/main/menu" tag="dl">
                <dt>
                    <span class="iconfont icon-xuanzejiantou"></span>
                </dt>
                <dd>菜单</dd>
            </router-link>
            <router-link to="/main/order" tag="dl">
                <dt>
                    <span class="iconfont icon-xuanzejiantou"></span>
                </dt>
                <dd>订单</dd>
            </router-link>
            <router-link to="/main/car" tag="dl">
                <dt>
                    <span class="iconfont icon-xuanzejiantou"></span>
                </dt>
                <dd>购物车</dd>
            </router-link>
            <router-link to="/main/my" tag="dl">
                <dt>
                    <span class="iconfont icon-xuanzejiantou"></span>
                </dt>
                <dd>我的</dd>
            </router-link>
        </footer>
    </div>
</template>

<style lang="scss">
@import '../../assets/font/iconfont.css';
.main-wrap{
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
    .con{
        width:100%;
        flex:1;
    }
    footer{
        width:100%;
        height: 44px;
        border-top:1px solid gray;
        display: flex;
        justify-content: space-between;
        padding:0 10px;
        text-align: center;
        .active{
            color:blue;
        }
    }
}
</style>

